<!--
 * @Author: liyaqi liyaqi0126@163.com
 * @Date: 2024-09-06 16:05:49
 * @LastEditors: liyaqi liyaqi0126@163.com
 * @LastEditTime: 2024-09-07 15:55:24
 * @FilePath: \FinancialLeasing-FG-FLCompany\src\views\systemConfig\festival\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <el-row :gutter="50" class="mb8" style="height: 120px;margin-bottom: 30px;" type="flex" align="middle">
            <el-col :span="1.5">
                <span style="font-size: 20px;font-weight: bold;">节假日统计</span>
            </el-col>
            <el-col :span="1.5">
                <div style="font-weight: bold;background-color: rgb(242, 242, 242);width: 180px;height: 120px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="font-size: 36px;font-weight: bold;padding-bottom: 5px;">111</div>
                    <div style="font-size: 20px;font-weight: bold;">2022</div>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div style="font-weight: bold;background-color: rgb(242, 242, 242);width: 180px;height: 120px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="font-size: 36px;font-weight: bold;padding-bottom: 5px;">111</div>
                    <div style="font-size: 20px;font-weight: bold;">2022</div>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div style="font-weight: bold;background-color: rgb(242, 242, 242);width: 180px;height: 120px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="font-size: 36px;font-weight: bold;padding-bottom: 5px;">111</div>
                    <div style="font-size: 20px;font-weight: bold;">2022</div>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div style="font-weight: bold;background-color: rgb(242, 242, 242);width: 180px;height: 120px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="font-size: 36px;font-weight: bold;padding-bottom: 5px;">111</div>
                    <div style="font-size: 20px;font-weight: bold;">2022</div>
                </div>
            </el-col>
        </el-row>

        <!-- <Card dis-hover> -->
            <div class="calendar">
                <span style="padding-right: 5px">年份</span>
                <el-date-picker
                    v-model="year"
                    type="year"
                    placeholder="选择年"
                    @change="changeYear" @blur="changeYear">
                </el-date-picker>
                <el-radio-group v-model="choseWorkDay" @change="changeWorkDay" v-removeAriaHidden style="padding-left: 40px;">
                    <el-radio :label="'workDay'">工作日</el-radio>
                    <el-radio :label="'noWorkDay'">非工作日</el-radio>
                </el-radio-group>
                <el-checkbox v-model="choseCheckAll" @change="changeCheckAll" style="padding-left: 40px;">全选</el-checkbox>

                <div class="row">
                <calendar
                    v-for="(mouth,index) in mouths"
                    :key="index"
                    :ref="mouth"
                    :mouth="mouth"
                    :calendar-optiond-day="calendarOptiondDay"
                    @checkedDate="checkedDate"
                    @checkedAll="checkedAll"
                    @selectDay="onClick"
                />
                </div>
            </div>
        <!-- </Card> -->

        <div style="width: 100%;display: flex;justify-content: center;">
            <el-button type="primary" @click="handleSave">保存节假日信息</el-button>
        </div>



    </div>
</template>
  
<script>
import { listHoliday, addHoliday } from '@/api/systemConfig/festival'

import Calendar from '@/views/systemConfig/festival/components/calendar'
import moment from 'moment'
  
export default {
    name: 'region',
    dicts: [],
    components: { Calendar },
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 日历数据
            festivalList: [],


            year: moment().format('YYYY'),
            choseWorkDay: '',
            choseCheckAll: false,
            mouths: [],
            checkedDates: [], // 最终选中的全部日期
            calendarOptiondDay: [],//选中日期数组
            allCheckDay: [],
            allSelectedDay: [],
            dayObj: {
                date: '',
                day: 6,
                isToday: false,
                row: 0,
                select: true,
                week: 6
            },


            finalCheckedDates: [] // 最终选中的全部日期保存时提交的格式



        }
    },
    mounted() {
        this.$nextTick(() => {
        this.changeYear(this.year)
        })
    },
    created() {
      this.getList()
    },
    methods: {
        /** 查询区域列表 */
        getList() {
            this.loading = true
            listHoliday({ year: this.year }).then(response => {
                this.festivalList = response.data                
                this.loading = false
            }
            )
        },

        // 保存节假日信息
        handleSave() {
            this.finalCheckedDates = []
            for(let i=0; i < this.checkedDates.length; i++) {
                this.finalCheckedDates.push(this.checkedDates[i].date)
            }

            // 使用Map对象来存储年份和日期数组
            const groupedByYear = new Map();
            this.finalCheckedDates.forEach(date => {
                const year = date.split('-')[0];
                // 如果Map中还没有这个年份，则使用set方法添加它，否则直接获取现有的值
                if(!groupedByYear.has(year)) {
                    groupedByYear.set(year, []);
                }
                groupedByYear.get(year).push(date);
            });
            // 将Map对象转换为普通对象（如果需要的话）
            const result = {};
            groupedByYear.forEach((datesArray, year) => {
                result[year] = datesArray;
            });
            // 输出结果
            // console.log(result);

            addHoliday(result).then(response => {
                this.$modal.msgSuccess('保存成功')
                this.open = false
                this.getList()
            })            
        },







        checkedAll(checkDayObj) {
            this.mouths.forEach(moth => {
                if(moth === checkDayObj.mouth) {
                    if(checkDayObj.checkedAll === false) {
                        this.choseCheckAll = false
                    }
                }
            })
        },
        formatDate(time) {
            var date = new Date(time);
            var time1 = moment(date).format("YYYY");
            return time1; //年月日 格式自己定义 'yyyy : MM : dd' 例 2018年12月5日的格式
        },
        changeYear(val) {
            this.year = moment(val + '').format('YYYY')
            this.choseWorkDay = ''
            this.choseCheckAll = false
            this.mouths = []
            for(let i = 1; i <= 12; i++) {
                if(i < 10) {
                    this.mouths.push(this.year + '-' + '0' + i)
                } else {
                    this.mouths.push(this.year + '-' + i)
                }
            }
        },
        onClick(day) {
            if(day.select) {
                day.select = false
            } else {
                day.select = true
            }
        },
        check(work, noWork) {
        // 选择工作日、非工作日、全选、全不选后，先清空选中项，再添加选中数据
            this.checkedDates = []
            this.mouths.forEach(mouth => {
                this.$refs[mouth][0].checkWork(true, work)
                this.$refs[mouth][0].checkWork(false, noWork)
            })
        },
        // 获取--最终--全部选中的数据
        checkedDate(checkDayObj) {
            if(this.allCheckDay && this.allCheckDay.length > 0) {
                    const mouthObj = this.allCheckDay.findIndex((mouthDay) => mouthDay.mouth === checkDayObj.mouth)
                    if (mouthObj !== -1) {
                    this.allCheckDay[mouthObj].checkedDay = checkDayObj.checkedDay
                    } else {
                        this.allCheckDay.push(checkDayObj)
                    }
            } else {
                this.allCheckDay.push(checkDayObj)
            }
            this.checkedDates = []
            this.allCheckDay.forEach(mouth => {
                this.checkedDates = [...this.checkedDates, ...mouth.checkedDay]
            })
            /** 
             * 日期列表转化字符串
             * cDatelist为最终list，按需要转化
             * 例：["2019-01-01", "2019-01-02", "2019-01-03", "2019-01-04", "2019-01-05"]
             */
            const checkedDates = [...this.checkedDates]
            const cDatelist = []
            checkedDates.forEach(val => {
                cDatelist.push(val.date)
            })
        },
        changeWorkDay(value) {
            this.choseCheckAll = false
            if(value) {
                if(value === '工作日') {
                    this.check(true, false)
                } else if(value === '非工作日') {
                    this.check(false, true)
                }
            }
        },
        changeCheckAll(value) {
            this.choseWorkDay = ''
            if(value) {
                this.check(true, true)
            } else {
                this.check(false, false)
            }
        }



    }
}
</script>

<style lang="scss" scoped>
.calendar{
    .chose_sd{
        margin: 5px 5%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .choseYear {
            width: 80px;margin-top: -2px;
            
        ::v-deep .ivu-input{
            height: 25px;
            margin-left: 3px;
        }
        }
        .chose_detail{
            margin-right:5px;
            margin-left: 20px;
        }
    }
    .row{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: flex-start;
        // margin: 5px 5% 20px 5%;
        margin: 20px 2% 20px 0%;
    }
}
</style>